<%--
  Created by IntelliJ IDEA.
  User: ss
  Date: 2019/12/11
  Time: 19:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript"
            src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath }/css/default.css">
    <script type="text/javascript"
            src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
    <script
            src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
            type="text/javascript"></script>
</head>
<body>

<table id="dg"></table>


<script>

    var editinx;

    var toolbar=[{
        id:'add',
        text:'添加',
        iconCls: 'icon-add',
        handler:add
    },{
       id:'del',
       text:'取消编辑行',
        iconCls:'icon-remove',
        handler:delRow
    }];


    var columns=[[
        {
            title:'姓名',
            field:'name',
            align:'center',
            width:100,
            editor:{
                type:'validatebox',
                options:{
                    required:true
                }
            }
        },{
            title:'年龄',
            field:'age',
            align:'center',
            width:100,
            editor:{
                type:'numberbox',
                options:{
                    required:true,
                    missingMessage:'请输入数字格式'
                }
            }
        },{
            title:'性别',
            field:'sex',
            align:'center',
            width:100,
            editor:{
                type:'validatebox',
                options:{
                    required:true
                }
            }
        }
    ]];

    $(function () {

        $("#dg").datagrid({
            toolbar:toolbar,
            striped:true,
            columns:columns,
            loadMsg:'正在加载',
            pagination:true
        })

    });

    //点击添加
    function add() {

        if (editinx!=undefined) {


            //结束编辑当前编辑的行
            $("#dg").datagrid('endEdit',editinx)

            editinx=undefined
        }else{

            //添加一行
            $("#dg").datagrid('insertRow',{
                index: 0,	// 索引从0开始
                row: {
                }

            });
            //开始编辑
            $("#dg").datagrid('beginEdit',0)

            editinx=0;
        }


        $("#dg").datagrid('insertRow')
    }

    
    //点击取消编辑行
    function delRow() {

        //得到当前真正编辑的行  editinx

        if (editinx!=undefined){

            //取消编辑行

            $("#dg").datagrid('endEdit',editinx)

            //删除编辑行

            $("#dg").datagrid('deleteRow',editinx)


            //设置editinx=undefined
            editinx=undefined


        }



    }

</script>

</body>
</html>
